<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">
        // 01 context 避开组件之间传值（props）
        // 发布订阅： 提供者 Provider / 消费者Consumer  

        //02 配置主题 

        const themes = {
            light: {
                color: '#9e9e9e',
                background: '#eeeeee'
            },
            dark: {
                color: '#e0e0e0',
                background: '#222222'
            },
        }

        //03 创建： Provider,Consumer 默认值
        const { Provider, Consumer } = React.createContext({ theme: themes.dark })

        //01 Provider,Consumer 组件
        //02 Provider 通过value 提供之值；Consumer 获取值 {()=>{}}
        //03 Consumer 订阅 Provider 提供的value 变化而变化
        //04 默认值 : Provider 里面 和 外面 区别

        class App extends React.Component {

            constructor() {
                super()
                // console.log('aaa',this.handleTheme);

                // this.handleTheme = this.handleTheme.bind(this)
                // console.log('bbb',this.handleTheme);

                this.state = {
                    theme: themes.dark,
                    handleTheme: this.handleTheme
                }

            }


            handleTheme = () => { //000fff1111
                const theme = this.state.theme === themes.light ? themes.dark : themes.light
                this.setState({
                    theme
                })
            }

            render() {

                return (
                    <div>
                        <h1 style={{ ...this.state.theme }}>App Component</h1>
                        <Provider value={this.state}>
                            <A1 />
                            <A2 />
                            {/*
                                <ThemeButton handleTheme={this.handleTheme}/>
                            */}
                        </ Provider>
                    </div>

                )
            }
        }

        // function ThemeButton(props){
        //     const {handleTheme} =  props

        //     return (
        //         <button onClick={()=>{
        //             handleTheme()
        //         }}>change theme</button>
        //     )
        // }


        function ThemeButton() {
            return (
                <Consumer>
                    {
                        ({ theme, handleTheme }) => {
                            console.log('theme', theme);
                            return <button onClick={() => { handleTheme() }} style={{ ...theme }}>change theme</button>
                        }
                    }
                </Consumer>
            )
        }


        function A1() {

            return (
                <Consumer>
                    {
                        ({ theme }) => {
                            // console.log(theme);
                            return (
                                <div>
                                    <h1 style={{ ...theme }}>A1 Component</h1>
                                    <B1 />
                                    <B2 />
                                </div>
                            )

                        }
                    }
                </Consumer>
            )
        }



        function A2(props) {
            // A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function.
            return (
                <div>
                    <Consumer>
                        {
                            ({ theme }) => {
                                return (
                                    <div>
                                        <h1 style={{ ...theme }}>A2 Component</h1>
                                        <ThemeButton />
                                    </div>
                                )

                            }
                        }

                    </Consumer>
                </div>
            )
        }

        function B1(props) {
            return (
                <Consumer>
                    {
                        ({ theme }) => {
                            return (
                                <div>
                                    <h1 style={{ ...theme }}>B1 Component</h1>
                                </div>
                            )
                        }
                    }
                </Consumer>
            )
        }
        function B2() {
            return (
                <Consumer>
                    {
                        ({ theme }) => {
                            return (
                                <div>
                                    <h1 style={{ ...theme }}>B2 Component</h1>
                                </div>
                            )
                        }
                    }
                </Consumer>
            )
        }


        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>